<script setup>
import { inject, reactive, ref, watch } from 'vue'
import { animeThen } from '@/tool/common'
import DragBox from '@/components/dragBox.vue'
import AddEnvDialog from '@/components/addEnvDialog.vue'
import AddTaskDialog from '@/components/addTaskDialog.vue'
import TaskWrap from '@/components/TaskWrap.vue'
import { HTTP_API } from '@/global/global'
import axios from 'axios'
import BaseModal from '@/components/BaseModal.vue'

const $Message = inject('$Message')
const nowEnv = ref(null)
const addEnvDialogRef = ref(null)
const addTaskDialogRef = ref(null)

const deleteModalRef = ref(null)
const taskWrapRef = ref(null)
const envList = reactive([])


async function fetchEnvList() {
  const res = await axios.post(HTTP_API + '/env/list')
  envList.length = 0
  envList.push(...res.data)
}


async function fetchDelEnv(id) {
  try {
    const formData = new FormData()
    formData.append('id', id)
    await axios.post(HTTP_API + '/env/del', formData)
    $Message.success('删除成功')
  } catch (err) {
    $Message.error('删除失败')
  }
}

fetchEnvList()

function selectEnv(item) {
  nowEnv.value = item
}

function back() {
  nowEnv.value = null
}

watch(nowEnv, (value, oldValue) => {
  if (nowEnv.value != null) {
    animeThen({
      targets: `.env-card:not(.${nowEnv.value.name}-card)`,
      opacity: 0,
      duration: 20
    }).then(() => {
      return animeThen({
        targets: `.${nowEnv.value.name}-card`,
        width: '1500px',
        top: 0,
        left: ((window.innerWidth - 1500) / 2) + 'px',
        height: 50,
        duration: 200,
        easing: 'easeInSine'
      })
    }).then(() => {
      document.querySelector('.task-wrap').style.display = 'flex'
      animeThen({
        targets: `.task-wrap`,
        top: 138,
        duration: 300,
        easing: 'easeInSine'
      })
      animeThen({
        targets: `.${nowEnv.value.name}-back`,
        opacity: 1
      })
      animeThen({
        targets: `.card-close`,
        opacity: 0
      })
      taskWrapRef.value.show(getNowIndex())
    })
  } else {
    console.log(value)
    let parentBox = document.querySelector(`.${oldValue.name}-card-box`)
    animeThen({
      targets: `.task-wrap`,
      top: 1000,
      duration: 200,
      easing: 'easeInSine'
    }).then(() => {
      document.querySelector('.task-wrap').style.display = 'none'
    })
    animeThen({
      targets: `.${oldValue.name}-card`,
      width: '400px',
      top: parentBox.offsetTop,
      left: parentBox.offsetLeft,
      height: '200px',
      duration: 200,
      delay: 0,
      easing: 'easeInSine'
    }).then(() => {
      return animeThen({
        targets: `.env-card:not(.${oldValue.name}-card)`,
        opacity: 1,
        duration: 20
      })
    }).then(() => {
      animeThen({
        targets: `.card-back`,
        opacity: 0,
        duration: 20
      })
      animeThen({
        targets: `.card-close`,
        opacity: 1
      })
    })
  }
})

function getNowIndex() {
  if (nowEnv.value == null) {
    return null
  }
  return envList.findIndex(item => item.name == nowEnv.value.name) + 1
}

function showAddEnvDialog() {
  if (nowEnv.value) {
    addTaskDialogRef.value.show(getNowIndex())
  } else {
    addEnvDialogRef.value.show()
  }
}

async function deleteEnv(item) {
  deleteModalRef.value.show('提示', '是否删除该环境', async () => {
    await fetchDelEnv(item.id)
    fetchEnvList()
  })
}

</script>

<template>
  <div class='pt-[40px] h-full'>
    <div class='flex items-center w-full  relative m-auto h-full justify-center text-base'>
      <div :i='item.name' v-for='(item, index) in envList' :key='item.name'>
        <div @click='selectEnv(item)'
             :class='[item.name + "-card-box", "env-card-box", {"!cursor-default": nowEnv != null}]'
             class='w-[400px] min-w-[400px] h-[200px] m-5 cursor-pointer' :key='item.name'>
          <Card class=' !absolute w-[400px] h-[200px] select-none'
                :class='[item.name + "-card", "env-card"]'>
            <div class='flex w-full h-full items-center  justify-center'
            >
              <svg :class='[item.name + "-back"]' @click.stop='back'
                   class='card-back w-5 left-4 opacity-0 cursor-pointer absolute'
                   xmlns='http://www.w3.org/2000/svg' fill='none'
                   viewBox='0 0 24 24'
                   stroke-width='1.5'
                   stroke='currentColor'>
                <path stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18' />
              </svg>
              <h1 class='font-bold flex items-center'>
                {{ item.name == 'add' ? '' : item.name }}环境
              </h1>
              <svg @click.stop='deleteEnv(item)' v-if='index > 0' xmlns='http://www.w3.org/2000/svg' fill='none'
                   viewBox='0 0 24 24'
                   stroke-width='1.5'
                   stroke='currentColor'
                   class='card-close w-5 right-2 top-2 cursor-pointer absolute'>
                <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
              </svg>
              <!--          <div class='dot w-[15px] h-[15px] rounded-full bg-amber-500 absolute right-2 top-2'></div>-->
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
  <task-wrap ref='taskWrapRef' :nowIndex='getNowIndex()' class='hidden'></task-wrap>
  <drag-box @select='showAddEnvDialog' :x='100' :y='90' :width='50' :height='50'>
    <div
      class='drag-inner w-[50px] h-[50px] bg-[#2b85e4] rounded-full flex justify-center items-center text-white cursor-pointer'>
      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'
           class='w-6 h-6'>
        <path stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15' />
      </svg>
    </div>
  </drag-box>
  <add-env-dialog @refresh='fetchEnvList' ref='addEnvDialogRef'></add-env-dialog>
  <add-task-dialog ref='addTaskDialogRef'></add-task-dialog>
  <base-modal ref='deleteModalRef'></base-modal>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}

.env-card-box .ivu-card {

  box-shadow: -1px 0px 14px 0px rgba(50, 50, 50, 0.25);
}

.drag-inner {

  box-shadow: -1px 0px 14px 0px rgba(50, 50, 50, 0.25);
}

.ivu-card-body {
  width: 100%;
  height: 100%;
}
</style>
